import React ,{useEffect} from 'react'
import {ProductCard,Image,SwipeCell, SubmitBar, Checkbox,Button} from "react-vant"
import {RootState,DataItem} from "@/utils/index"
import BetterScroll from "better-scroll"
import * as api from "@/api/index"
import {useDispatch,useSelector} from "react-redux"
type Props = {}

function Shopcar({}: Props) {
  const dispatch = useDispatch()
  const all_show_check = useSelector((state:RootState)=>state.all_show_check)
  const all_price = useSelector((state:RootState)=>state.all_price)
  console.log("all_show_check",all_show_check);
  
  const shopcar_data = useSelector((state:RootState)=>state.shopcar_data)
  console.log(shopcar_data);
  useEffect(()=>{
    new BetterScroll (".shopcar",{
      click:true,
      probeType:3,
      scrollY:true
    })
  },[])
  return (
    <div className='shopcar'>
      <div>
        {
          shopcar_data && shopcar_data.map((item:DataItem,index:number)=>{
            return   <SwipeCell
              key={index}
              // onOpen={() => Toast.info('打开')}
              // onClose={() => Toast.info('关闭')}
              rightAction={
                <Button 
                  style={{ height: '100%' }} 
                  square 
                  type="danger" 
                  onClick={()=>{
                    dispatch(api.del_shopcar_data(item))
                  }}
                  >
                  删除
                </Button>
              }
            >
            <ProductCard
               
                num={item.num}
                price={item.price}
                desc="描述信息"
                title={item.title}
                thumb={
                    <div style={{display:"flex"}}>
                        <input 
                          type="checkbox" 
                          checked={item.checked} 
                          style={{marginRight:"5px"}}
                          onChange={()=>{
                            dispatch(api.show_shopcar_data(item))
                          }}
                          />
                        <Image lazyload src={item.img}/>
                    </div>
                }
                footer={
                    <>
                      <Button 
                        size="mini" 
                        round 
                        plain 
                        style={{ marginRight: 2 }}
                        onClick={()=>{
                          (item.num as number)< 2? dispatch(api.del_shopcar_data(item)):dispatch(api.del_shopcar_count(item))
                        }}
                        >
                        -
                      </Button>
                      <Button 
                        size="mini" 
                        round 
                        plain 
                        onClick={()=>{
                          dispatch(api.add_shopcar_count(item))
                        }}
                      >
                        +
                      </Button>
                    </>
                }
              />
          </SwipeCell>
            
            
          })
        }
      </div>
      <SubmitBar
        price={all_price}
        buttonText="提交订单"
      >
        <Checkbox checked={all_show_check}  onChange={(e)=>{
          dispatch(api.all_check_shopcar(e));
        }}>全选</Checkbox>
      </SubmitBar>
    </div>
  )
}

export default Shopcar